<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0,minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="keywords" content="半次元,次元社,第一弹,juju,萌购,dilidili,布丁,bilibili,战舰少女,少女咖啡枪,前线,暖暖,哔哩哔哩,cosplay,女优,欧派,捏他,捏ta,被窝,绝对领域,动画,漫画,弹幕,宅男,声优,梦见,集,萌娘,同人,手游,美图,绅士,阴阳师">
    <meta name="description" content="【难得一见】的二次元虚拟生活平台，绝对不同于“论坛”、“社团”、“同好会”的存在；【美貌绝伦】的移动App，将一成不变的界面以动漫学园的形式呈现，大欧派前辈、死库水学妹都是你可以随意调戏的看板娘。【屈指可数】的GalGame化应用，将一切内容以游戏形式呈现，线下可攻略女主角、线上能组团推主线；【凤毛麟角】般充满惊喜的App，全图随机彩蛋每日不同、神奇Gacha活动好礼连连，一不小心就会收到霓虹国寄来的惊喜；【名列前茅】的二次元综合信息网，新番漫画美图音乐展会悉数涵盖，更有珍稀资源专供作为老司机的你；【实力强劲】的dalao级行业地位，与各种漫展、演唱会、旅行团、手办销售、游戏厂商都有一腿，优惠福利应有尽有。">
    <link rel="shortcut icon" href="../public/img/x-icon.png">
	<link rel="bookmark" href="../public/img/x-icon.png" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="../public/img/x-icon.png">
    <title>Kira - 你的二次元生活，动漫新番资源福利社区</title>
    <link rel="stylesheet" href="../public/css/reset.css">
    <link rel="stylesheet" href="../public/css/swiper-4.2.6.min.css">
    <link rel="stylesheet" href="../public/css/font-awesome.min.css">
    <link rel="stylesheet" href="../public/css/com.css">
</head>
<body>
    <div id="app" class="wrap community" v-cloak>
        <public-header :status="header"></public-header>
        <div class="content body-content ClearFix">
            <div class="col-left">
                <div class="hot">
                    <h2><i class="icon-hot"></i>热门帖子</h2>
                    <ul>
                        <li><a href="#">有了它，6款红白机游戏不用模拟器也能玩了</a></li>
                        <li><a href="#">《火箭联盟》国区官网正式上线 腾讯代理</a></li>
                        <li><a href="#">多职业改动！魔兽世界PTR 7.2.5官方补丁说明</a></li>
                        <li><a href="#">直白点说相亲女孩有希望吗？</a></li>
                        <li><a href="#">二次元美图·萝莉篇·忍野忍·图集（第二期）</a></li>
                        <li><a href="#">再次回想起来吧，统治去年冬天的马猴烧酒们</a></li>
                        <li><a href="#">一拳打死牛！水树奈奈在上坂堇节目中示范杠铃</a></li>
                        <li><a href="#">一组佐仓绫音长发近照曝光 日宅赞长发绫音变大</a></li>
                    </ul>
                </div>
                <div class="ranking-content">
                    <h2 class="img-title">摸鱼部<b class="ranking">排行榜</b><div class="data"><span class="active">今日</span><span>本周</span></div></h2>
                    <ul class="list">
                        <li v-for="item in 5">
                            <a href="#" v-if="item <= 3">
                                <dl>
                                    <dt :data-num="item"><img src="../public/img/temp3.jpg" alt=""></dt>
                                    <dd>
                                        <h6>拥有多职业改动！魔兽世界PTR7.2.5官方补丁说明</h6>
                                        <div>UP:水树奈奈</div>
                                        <div class="view-comments"><span class="view"><i></i>3213</span> <span class="comments"><i></i>61</span></div>
                                    </dd>
                                </dl>
                            </a>
                            <a href="http://www.baidu.com" v-else><p :data-num="item">身材略过丰满 《闪乱神乐：沙滩戏水》索尼身材略过丰满 《闪乱神乐：沙滩戏水》索尼</p></a>
                        </li>
                    </ul>
                </div>
                <div class="swiper-container swiper-no-swiping">
                    <div class="swiper-wrapper">
                        <div v-for="item in 5" class="swiper-slide">
                            <a href="#">
                                <!-- <image-item :src="item.bg.path"></image-item> -->
                                <img src="../public/img/temp3.jpg" alt="">
                                <p>《仁王》DLC的新武器公布了《仁王》DLC的新武器公布了《仁王》DLC的新武器公布了《仁王》DLC的新武器公布了《仁王》DLC的新武器公布了《仁王》DLC的新武器公布了</p>
                            </a>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>

            <div class="col-middle">
                <ul class="nav">
                    <li class="active"><a href="#">广场</a></li>
                    <li><a href="#">关注</a></li>
                </ul>
                <ul class="list">
                    <li v-for="(item, index) in 5" :key="index">
                        <dl>
                            <dt><div class="head-portrait"><img src="../public/img/icon-vip.png" alt=""></div></dt>
                            <dd>
                                <h3 class="post-info">
                                    <span class="name">小忍Dex</span>
                                    <span class="sex"><i class="fa fa-mars"></i></span>
                                    <span class="level"><b>LV</b>13</span>
                                    <span class="title-of">雪域肝神</span>
                                    <ul class="the-label">
                                        <li>美少女</li>
                                        <li>怪物猎人</li>
                                    </ul>
                                </h3>
                                <div class="post-content">
                                    <p class="post-title">二次元美图·萝莉篇·忍野忍·图集（第三期）</p>
                                    <p class="post-text">近几年光腚算是非常放得开的了，但关键时刻还是要挺身而出保护一下我们广大青少年儿童的。这并非无道理，先不说已经形成了稳固三观的成年人们，但我们每个人最近一定都见过这些现象</p>
                                    <p class="post-img">
                                        <img v-for="(item, index) in 6" :key="index" src="../public/img/temp3.jpg" alt="">
                                    </p>
                                </div>
                                <div class="post-tag">
                                    <div v-for="(item, index) in 5" :key="index"><label>感谢楼主</label><span>71</span></div>
                                </div>
                                <div class="post-data">
                                    <div class="time">1小时前</div>
                                    <div class="view-comments">
                                        <span class="view">
                                            <i></i>3213
                                        </span>
                                        <span class="comments">
                                            <i></i>61
                                        </span>
                                        <span class="zan">
                                            <i></i>61
                                        </span>
                                    </div>
                                </div>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>

            <user-info :data="userInfo"></user-info>
            <div class="community-list">
                <h2>我的社团</h2>
                <ul>
                  <li v-for="item in 9">手绘</li>
                </ul>
                <h2>所有社团</h2>
                <ul>
                  <li v-for="item in 12">手绘</li>
                </ul>
            </div>
        </div>
        <!-- footer -->
        <public-footer></public-footer>
        <i class="back-top" @click="scrollTop()"> <img src="../public/img/back-top.png" alt=""> </i>
    </div>
    <script src="../public/js/jquery-1.11.1.min.js"></script>
    <script src="../public/js/underscore.js"></script>
    <script src="../public/js/swiper-4.2.6.min.js"></script>
    <script src="../public/js/vue.js"></script>
    <script src="../public/components/components.js"></script>
    <script src="../public/js/com.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                header:{
                    loginStatus: true,
                    index: 2,
                },
                userInfo: {
                    index:1,
                },
            },
            methods: {
                //回到顶部
                scrollTop: function(){
                    window.scroll(0,0);
                },
            },
            mounted() {
                let _this = this;
                console.log(_this._data)
            },
            updated(){
                // new Swiper('.swiper-container', {
                //     autoplay: {
                //         delay: 5000,
                //         disableOnInteraction: false,
                //     },
                //     loop: true,
                //     pagination: {
                //         el: '.swiper-pagination',
                //         clickable: true,
                //     },
                //     effect : 'flip',
                // });
            },

        });
        new Swiper('.swiper-container', {
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            effect : 'flip',
        });
    </script>
</body>
</html>